<template>
  <div class="page flex-col">
    <div class="group_1 flex-row">
      <img
        class="image_1"
        referrerpolicy="no-referrer"
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng1fc89d2d812e505cf06150377898677cef81745ce04169e4b70dae1dcdfeed41"
      />
      <span class="text_1">行业VOC数据库管理与查询系统</span>
      <span style="width: 120px; height: 64px"></span>
      <!-- <div class="group_26 flex-col">
        <div class="text-wrapper_1 flex-col">
          <span class="text_2">首页</span>
        </div>
      </div>
      <span class="text_3">数据查询</span>
      <img
        class="thumbnail_1"
        referrerpolicy="no-referrer"
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng5bd8a2419208798855f502b6a61f54afd4540c0255a4cc4f8898d0afa4d4961f"
      />
      <span class="text_4">研究成果</span>
      <img
        class="thumbnail_2"
        referrerpolicy="no-referrer"
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng5bd8a2419208798855f502b6a61f54afd4540c0255a4cc4f8898d0afa4d4961f"
      />
      <span class="text_5">新闻动态</span> <span class="text_6">团队介绍</span>
      <span class="text_7">关于数据库</span> -->
      <el-menu
        :default-active="this.$router.path"
        router
        class="el-menu-demo"
        mode="horizontal"
        background-color="#003D8C"
        text-color="#B2D4FF"
        active-text-color="#FFFFFF"
        :style="{ borderBottom: '0px solid #e6e6e6', fontSiez: '16px' }"
        style="box-shadow: inset 0px -1px 0px 0px rgb(13, 102, 169)"
      >
        <el-menu-item class="menuItem2" index="/">首页</el-menu-item>
        <!-- <el-divider direction="vertical"></el-divider> -->
        <el-submenu index="2">
          <template slot="title">数据查询</template>
          <el-menu-item index="/search">行业VOCs</el-menu-item>
          <el-menu-item index="/aerosol">生物气溶胶</el-menu-item>
          <el-menu-item index="/serachIntro">查询说明</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">研究成果</template>
          <el-menu-item index="/paper">发表论文</el-menu-item>
          <el-menu-item index="/patent">申请专利</el-menu-item>
          <el-menu-item index="/fund">项目基金</el-menu-item>
        </el-submenu>
        <el-menu-item class="menuItem" index="/news">新闻动态</el-menu-item>
        <el-menu-item class="menuItem" index="/team">团队介绍</el-menu-item>
        <el-menu-item class="menuItem3" index="/about">关于数据库</el-menu-item>
        <!-- <el-menu-item index="/search">VOC查询</el-menu-item>
        <el-menu-item index="/Nine">气溶胶查询</el-menu-item> -->
        <!-- <el-menu-item index="/reaction">reaction</el-menu-item> -->
      </el-menu>
    </div>
  </div>
</template>

<script>
export default {
  methods: {},
};
</script>
<style lang="scss" scoped>
/* 第一个CSS样式 */
.page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 1440px;
  // height: 3535px;
  overflow: hidden;
  .group_1 {
    box-shadow: inset 0px -1px 0px 0px rgba(13, 102, 169, 1);
    background-color: rgba(0, 61, 140, 1);
    width: 1440px;
    height: 64px;
    .image_1 {
      width: 226px;
      height: 42px;
      margin: 9px 0 0 14px;
    }
    .text_1 {
      width: 338px;
      height: 24px;
      overflow-wrap: break-word;
      color: rgba(255, 255, 255, 1);
      font-size: 24px;
      font-family: SourceHanSansCN-Bold;
      font-weight: 700;
      text-align: justify;
      white-space: nowrap;
      line-height: 36px;
      margin: 13px 0 9px 25px;
    }
  }
}
/* 第二个CSS样式 */
@import "@/css/common.scss";
::v-deep .menu .el-menu--horizontal .el-menu__cover {
  background-color: #000; /* 设置遮罩层的背景颜色为黑色 */
}
.menuItem {
  width: 100px;
  font-size: 16px;
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 600;
}
.menuItem2 {
  width: 76px;
  font-size: 16px;
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 600;
}
.menuItem3 {
  width: 120px;
  font-size: 16px;
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 600;
}
::v-deep .el-submenu__title {
  font-size: 16px;
  font-family: SourceHanSansCN, SourceHanSansCN;
  font-weight: 600;
}
//设置箭头
::v-deep .el-icon-arrow-down:before {
  content: "\e790";
  font-size: large;
  color: white;
}
//二次菜单悬浮及背景样式
.el-menu--popup-bottom-start .el-menu-item:hover {
  color: rgba(86, 86, 86, 1) !important;
}
.el-menu--popup-bottom-start .el-menu-item {
  color: white;
  padding: 0px;
}
::v-deep .el-menu el-menu--popup el-menu--popup-bottom-start {
  padding: 0px;
}
</style>